Introduction to CSS layout
表格布局
一个<table>
标签之所以能够像表格那样展示,是由于 css 默认给<table>
标签设置了一组 table 布局属性。当这些属性被应用于排列非<table>
元素时,这种用法被称为“使用 CSS 表格”。
所以你也可以让别的东西像表格一样,比如<form>
display: table;``display: table-row;``display: table-cell;``display: table-caption;
<form>
<p>First of all, tell us your name and age.</p>
<div>
<label for="fname">First name:</label>
<input type="text" id="fname" />
</div>
<div>
<label for="lname">Last name:</label>
<input type="text" id="lname" />
</div>
<div>
<label for="age">Age:</label>
<input type="text" id="age" />
</div>
</form>
html {
font-family: sans-serif;
}
form {
display: table;
margin: 0 auto;
}
form div {
display: table-row;
}
form label,
form input {
display: table-cell;
margin-bottom: 10px;
}
form label {
width: 200px;
padding-right: 5%;
text-align: right;
}
form input {
width: 300px;
}
form p {
display: table-caption;
caption-side: bottom;
width: 300px;
color: #999;
font-style: italic;
}